@import '../../../assets/css/CommonStyle.scss';
#Doctor-AddGroupMember {
  position: relative;
  height: 100vh;
  min-height: 480px;
  .colorNull {
    color: rgba(#333, 0.2);
  }

  .addGroupMemberHeader {
    padding: 0 m-w(30);
  }

  .searchArea {
    padding: 0 m-w(30);
    height: m-w(72);
    width: 100%;
  }
  .tabArea {
    display: flex;
    padding: m-w(24) m-w(30);
    position: relative;
    & > div {
      font-size: m-w(30);
      margin-right: m-w(120);
      font-weight: 500;
      position: relative;
      z-index: 5;
      & > p {
        font-weight: bold;
        margin-bottom: 0;
        position: relative;
        z-index: 10;
      }
    }
    .choosed {
      width: m-w(90);
      height: m-w(16);
      background: #a0cdff;
      position: absolute;
      bottom: 0;
      z-index: 5;
    }
    img {
      width: m-w(35);
    }
    img,
    span {
      position: absolute;
      height: m-w(35);
      right: m-w(30);
      font-size: m-w(22);
      top: m-w(30);
    }
  }
  .tips {
    padding: 0 m-w(30);
    font-size: m-w(22);
    color: #afa7a7;
    p {
      margin-bottom: 0;
    }
  }
  .choosedList {
    // padding: m-w(32) 0;
    margin: 0 m-w(30);
    border-bottom: m-w(1) solid #eaeaea;
    font-size: m-w(30);
    display: flex;
    span {
      line-height: m-w(88);
      height: m-w(88);
      margin-right: m-w(10);
    }
    .choosedPatient {
      overflow: auto;
      display: flex;
      width: m-w(550);
      margin-bottom: m-w(30);
      background: #fff;
      img {
        width: m-w(88);
        height: m-w(88);
        border-radius: 100px;
        margin-right: m-w(16);
      }
    }
  }
  .patientList {
    text-align: left;
    padding: 0 m-w(30);
    overflow: auto;
    //height: calc(100vh - 225px);
    padding-bottom: m-w(60);
    .noGroup {
      text-align: center;
      img {
        width: m-w(240);
        height: m-w(240);
        margin-top: m-w(80);
      }
      p {
        font-size: m-w(22);
        margin-top: m-w(40);
        color: #afa7a7;
      }
    }
    .patientItem {
      margin: m-w(40) 0;
      height: m-w(88);
      display: flex;
      align-items: center;
      p {
        margin: 0;
      }
      .selectIcon {
        width: m-w(34);
        height: m-w(34);
        margin-right: m-w(27);
      }
      .photo {
        width: m-w(88);
        height: m-w(88);
        margin-right: m-w(32);
        border-radius: 50%;
      }
      .infoArea {
        flex: 1;
        font-size: m-w(30);
        p:last-of-type {
          font-size: m-w(26);
        }
      }
    }
  }
  .bottomArea {
    padding: 0 m-w(30);
    height: m-w(98);
    line-height: m-w(98);
    border-top: m-w(1) solid #eaeaea;
    position: absolute;
    bottom: m-w(-98);
    width: 100%;
    color: #429cff;
    background: #fafafa;
    font-size: m-w(30);
    opacity: 0;
    transition: bottom 1s, opacity 1s;
    .rightArea {
      float: right;
    }
  }
  .showBottomArea {
    bottom: 0;
    opacity: 1;
  }
}
.DoctorAddMemberModal {
  border-radius: m-w(32) m-w(32) 0px 0px;
  height: 90vh;
  overflow: hidden;
  //position: absolute;
  position: unset;
  max-width: 450px;
  margin: 0 auto;
  margin-top: 10vh;
  .modalHeader {
    padding: 0 m-w(30);
  }
  .modalHeader {
    height: m-w(114);
    line-height: m-w(114);
    display: flex;
    justify-content: space-between;
    font-weight: 500;
    .sure {
      color: #429cff;
    }
    .sure:last-child {
      margin-left: m-w(60);
    }
  }
  .modalTitle {
    font-size: m-w(38);
    font-weight: bold;
    color: #333;
  }
  .numberInputContainer {
    padding: 0 m-w(30);
  }
  .numberInput {
    width: 100%;
    height: m-w(106);
    line-height: m-w(106);
    box-shadow: 0px 0px 30px 0px rgba(87, 82, 82, 0.1);
    border-radius: 8px;
    margin-bottom: m-w(24);

    .name {
      font-size: m-w(30);
      font-weight: 700;
      color: #333;
      margin-right: m-w(16);
      max-width: m-w(250);
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .am-input-label {
    width: m-w(330) !important;
    font-size: m-w(26);
    color: #999;
    display: flex;
  }
  .am-input-control,
  input {
    float: right;
    width: m-w(180) !important;
    font-size: m-w(30) !important;
    text-align: right;
  }
  .verifyResultContainer {
    height: m-w(880);
    overflow: auto;
    text-align: left;
    padding: 0 m-w(30);
    padding-top: 12px;
  }
  .verifyResult {
    box-shadow: 0 0 16px 0 rgba(87, 82, 82, 0.2);
    border-radius: m-w(8);
    margin-bottom: m-w(24);
    padding-bottom: m-w(32);
    .titleArea {
      height: m-w(106);
      line-height: m-w(106);
      padding: 0 m-w(16);
      position: relative;
      font-size: m-w(26);
      display: flex;
      justify-content: space-between;
      .leftArea {
        display: flex;
        align-items: center;
      }
      .name {
        font-size: m-w(30);
        font-weight: 700;
        color: #333;
        max-width: m-w(180);
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        white-space: nowrap;
      }
      .sampleSequence {
        float: right;
        color: #333;
        font-size: m-w(30);
      }
    }
    .details {
      margin: 0 m-w(16);
      font-size: m-w(22);
      padding: m-w(16);
      & > div {
        line-height: m-w(40);
      }
      img {
        width: m-w(28);
        height: m-w(28);
        float: right;
      }
      .patientName {
        color: #333;
        font-weight: 700;
      }
    }
    .match {
      background: #ecf5ff;
    }
    .isBand,
    .notExist {
      border: 1px solid #fad291;
    }
    .notMatch {
      background: #fef6e9;
    }
  }
  .disable {
    color: #c6e1ff !important;
  }
}
.addToGroupComfirm,
.memberNotInList {
  height: m-w(600);
  width: m-w(690);
  border-radius: m-w(24);
  .am-modal-content,
  .am-modal-body {
    padding: 0;
  }
  .content {
    text-align: center;
    margin-bottom: m-w(134);
    font-size: m-w(26);
    color: rgba(#333, 0.5);
    img {
      height: m-w(68);
      width: m-w(68);
      margin: m-w(86) 0;
    }
    .firstLine {
      font-size: m-w(30);
      color: #333;
      margin-bottom: m-w(24);
    }
  }
  .buttonContainer {
    & > span {
      width: m-w(200);
      height: m-w(72);
      line-height: m-w(72);
      display: inline-block;
      border-radius: m-w(8);
      font-size: m-w(30);
    }
    .cancel {
      border: m-w(2) solid #429cff;
      color: #429cff;
      margin-right: m-w(86);
    }
    .sure {
      background: #429cff;
      color: #fff;
    }
  }
}
